<template>
	<view class="container">
		<!-- 加班设置 -->
		<view class="title-bg">
			<view class="title-text">
				<text>加班</text>
			</view>
		</view>
		<view class="body-bg body-btn">
			<button class="btn-bg" type="default"  @click="clickSetJiabanMinMinutes" >
				<uni-row>
					<uni-col :span="12">
						<view class="text-left">最短加班时长</view>
					</uni-col>
					<uni-col :span="12">
						<view class="text-right">{{kaoqinSetting.jiabanMinMinutes}} 分钟<uni-icons type="right"></uni-icons>
						</view>
					</uni-col>
				</uni-row>
			</button>
		</view>

		<!-- 补卡设置 -->
		<view class="title-bg">
			<view class="title-text">
				<text>补卡</text>
			</view>
		</view>
		<view class="body-bg body-btn">
			<button type="default" class="btn-bg" @click="clickSetBukaTimes">
				<uni-row>
					<uni-col :span="12">
						<view class="text-left">每月最大补卡次数</view>
					</uni-col>
					<uni-col :span="12">
						<view class="text-right">{{kaoqinSetting.bukaMaxTimes}} 次<uni-icons type="right"></uni-icons>
						</view>
					</uni-col>
				</uni-row>
			</button>
		</view>
		<view class="body-bg body-btn">
			<button type="default" class="btn-bg" @click="clickSetBukaDays">
				<uni-row>
					<uni-col :span="12">
						<view class="text-left">几天内可以补签</view>
					</uni-col>
					<uni-col :span="12">
						<view class="text-right">{{kaoqinSetting.bukaDays}} 天<uni-icons type="right"></uni-icons>
						</view>
					</uni-col>
				</uni-row>
			</button>
		</view>
		<!-- <view class="body-bg body-btn">
			<button type="default" class="btn-bg" @click="clickSetBukaDays">
				<uni-row>
					<uni-col :span="12">
						<view class="text-left"><b>补签是否需要审核</b></view>
					</uni-col>
					<uni-col :span="12">
						<view class="text-right">{{kaoqinSetting.bukaDays}} 天<uni-icons type="right"></uni-icons>
						</view>
					</uni-col>
				</uni-row>
			</button>
		</view> -->

		<!-- 迟到设置 -->
		<view class="title-bg">
			<view class="title-text">
				<text>迟到</text>
			</view>
		</view>
		<view class="body-bg body-btn">
			<button type="default" class="btn-bg" @click="clickSetChidao1Minutes">
				<uni-row>
					<uni-col :span="12">
						<view class="text-left">一般迟到</view>
					</uni-col>
					<uni-col :span="12">
						<view class="text-right">超过{{kaoqinSetting.chidao1Minutes}}分钟<uni-icons type="right"></uni-icons>
						</view>
					</uni-col>
				</uni-row>
			</button>
		</view>
		<view class="body-bg body-btn">
			<button type="default" class="btn-bg" @click="clickSetchidao2Minutes">
				<uni-row>
					<uni-col :span="12">
						<view class="text-left">严重迟到</view>
					</uni-col>
					<uni-col :span="12">
						<view class="text-right">超过{{kaoqinSetting.chidao2Minutes}}分钟<uni-icons type="right"></uni-icons>
						</view>
					</uni-col>
				</uni-row>
			</button>
		</view>
		<view class="body-bg body-btn">
			<button type="default" class="btn-bg" @click="clickSetChidao3Minutes">
				<uni-row>
					<uni-col :span="12">
						<view class="text-left">旷工</view>
					</uni-col>
					<uni-col :span="12">
						<view class="text-right">超过{{kaoqinSetting.chidao3Minutes}}分钟<uni-icons type="right"></uni-icons>
						</view>
					</uni-col>
				</uni-row>
			</button>
		</view>
		
		<!-- 早退设置 -->
		<view class="title-bg">
			<view class="title-text">
				<text>早退</text>
			</view>
		</view>
		<view class="body-bg body-btn">
			<button type="default" class="btn-bg" @click="clickSetZaotui1Minutes">
				<uni-row>
					<uni-col :span="12">
						<view class="text-left">一般早退</view>
					</uni-col>
					<uni-col :span="12">
						<view class="text-right">超过{{kaoqinSetting.zaotui1Minutes}}分钟<uni-icons type="right"></uni-icons>
						</view>
					</uni-col>
				</uni-row>
			</button>
		</view>
		<view class="body-bg body-btn">
			<button type="default" class="btn-bg" @click="clickSetZaotui2Minutes">
				<uni-row>
					<uni-col :span="12">
						<view class="text-left">严重早退</view>
					</uni-col>
					<uni-col :span="12">
						<view class="text-right">超过{{kaoqinSetting.zaotui2Minutes}}分钟<uni-icons type="right"></uni-icons>
						</view>
					</uni-col>
				</uni-row>
			</button>
		</view>
		<view class="body-bg body-btn">
			<button type="default" class="btn-bg" @click="clickSetZaotui3Minutes">
				<uni-row>
					<uni-col :span="12">
						<view class="text-left">旷工</view>
					</uni-col>
					<uni-col :span="12">
						<view class="text-right">超过{{kaoqinSetting.zaotui3Minutes}}分钟<uni-icons type="right"></uni-icons>
						</view>
					</uni-col>
				</uni-row>
			</button>
		</view>
		
		<!-- 打卡时间-->
		<view class="title-bg">
			<view class="title-text">
				<text>打卡时间</text>
			</view>
		</view>
		<view class="body-bg body-picker">
			<picker mode="time" :value="kaoqinSetting.shangbanTime" start="06:00" end="11:59" @change="shangbanTimeChange">
				<uni-row>
					<uni-col :span="12">
						<view class="text-left">上班时间</view>
					</uni-col>
					<uni-col :span="12">
						<view class="text-right">{{kaoqinSetting.shangbanTime}}
							<uni-icons type="right"></uni-icons>
						</view>
					</uni-col>
				</uni-row>
			</picker>
		</view>
		<view class="body-bg body-picker">
			<picker mode="time" :value="kaoqinSetting.xiabanTime" start="12:00" end="23:59" @change="xiabanTimeChange">
				<uni-row>
					<uni-col :span="12">
						<view class="text-left">下班时间</view>
					</uni-col>
					<uni-col :span="12">
						<view class="text-right">{{kaoqinSetting.xiabanTime}}
							<uni-icons type="right"></uni-icons>
						</view>
					</uni-col>
				</uni-row>
			</picker>
		</view>
		
		<!-- 外勤设置 -->
		<!-- <view class="title-bg">
			<view class="title-text">
				<text>外勤</text>
			</view>
		</view>
		<view class="body-bg body-picker">
			<picker type="default"  :value="kaoqinSetting.waiqianAudit" :range="['不需要', '需要']"
				@change="waiqinAuditChange">
				<uni-row>
					<uni-col :span="12">
						<view class="text-left"><b>外勤是否需要打卡</b></view>
					</uni-col>
					<uni-col :span="12">
						<view class="text-right">{{waiqinAuditStr()}}
							<uni-icons type="right"></uni-icons>
						</view>
					</uni-col>
				</uni-row>
			</picker>
		</view> -->
		
		<!-- 出差设置 -->
		<!-- <view class="title-bg">
			<view class="title-text">
				<text>出差</text>
			</view>
		</view>
		<view class="body-bg body-picker">
			<picker type="default" :value="kaoqinSetting.chuchaiDaka" :range="['不需要', '需要']"
				@change="chuchaiDakaChange">
				<uni-row>
					<uni-col :span="12">
						<view class="text-left">出差是否需要打卡</view>
					</uni-col>
					<uni-col :span="12">
						<view class="text-right">{{chuchaiDakaStr()}}
							<uni-icons type="right"></uni-icons>
						</view>
					</uni-col>
				</uni-row>
			</picker>
		</view> -->

		<!-- 打卡位置 -->
		<view class="title-bg">
			<view class="title-text">
				<text>打卡位置</text>
			</view>
		</view>
		<view class="body-bg body-btn">
			<button type="default" class="btn-bg" @click="clickChooseDakaPos">
				<uni-row>
					<uni-col :span="6">
						<view class="text-left">打卡位置</view>
					</uni-col>
					<uni-col :span="18">
						<view class="text-right">{{kaoqinSetting.dakaAddress}}
							<uni-icons type="right"></uni-icons>
						</view>
					</uni-col>
				</uni-row>
			</button>
		</view>
		<view class="body-bg body-btn">
			<button type="default" class="btn-bg" @click="clickDakaFanwei">
				<uni-row>
					<uni-col :span="12">
						<view class="text-left">打卡范围</view>
					</uni-col>
					<uni-col :span="12">
						<view class="text-right">{{kaoqinSetting.dakaFanwei}}米以内<uni-icons type="right"></uni-icons>
						</view>
					</uni-col>
				</uni-row>
			</button>
		</view>

		<uni-popup ref="jiabanMinDialog" type="dialog">
			<uni-popup-dialog mode="input" title="请输入最短加班时长(分钟)" :value="kaoqinSetting.jiabanMinMinutes"
				@confirm="confirmJiabanMinMinutes" />
		</uni-popup>

		<uni-popup ref="bukaTimesDialog" type="dialog">
			<uni-popup-dialog mode="input" title="请输入每月最大补卡次数" :value="kaoqinSetting.bukaMaxTimes"
				@confirm="confirmBukaTimes" />
		</uni-popup>

		<uni-popup ref="bukaDaysDialog" type="dialog">
			<uni-popup-dialog mode="input" title="请输入几天内可以补签" :value="kaoqinSetting.bukaDays"
				@confirm="confirmBukaDays" />
		</uni-popup>

		<uni-popup ref="chidao1Dialog" type="dialog">
			<uni-popup-dialog mode="input" title="一般迟到时间(分钟)" :value="kaoqinSetting.chidao1Minutes"
				@confirm="confirmChidao1Minutes" />
		</uni-popup>

		<uni-popup ref="chidao2Dialog" type="dialog">
			<uni-popup-dialog mode="input" title="严重迟到时间(分钟)" :value="kaoqinSetting.chidao2Minutes"
				@confirm="confirmChidao2Minutes" />
		</uni-popup>

		<uni-popup ref="chidao3Dialog" type="dialog">
			<uni-popup-dialog mode="input" title="旷工迟到时间(分钟)" :value="kaoqinSetting.chidao3Minutes"
				@confirm="confirmChidao3Minutes" />
		</uni-popup>

		<uni-popup ref="zaotui1Dialog" type="dialog">
			<uni-popup-dialog mode="input" title="一般早退时间(分钟)" :value="kaoqinSetting.zaotui1Minutes"
				@confirm="confirmZaotui1Minutes" />
		</uni-popup>

		<uni-popup ref="zaotui2Dialog" type="dialog">
			<uni-popup-dialog mode="input" title="严重早退时间(分钟)" :value="kaoqinSetting.zaotui2Minutes"
				@confirm="confirmZaotui2Minutes" />
		</uni-popup>

		<uni-popup ref="zaotui3Dialog" type="dialog">
			<uni-popup-dialog mode="input" title="旷工早退时间(分钟)" :value="kaoqinSetting.zaotui3Minutes"
				@confirm="confirmZaotui3Minutes" />
		</uni-popup>

		<uni-popup ref="fanweiDialog" type="dialog">
			<uni-popup-dialog mode="input" title="打卡范围(米)" :value="kaoqinSetting.dakaFanwei"
				@confirm="confirmDakaFanwei" />
		</uni-popup>

	</view>
</template>

<script>
	import store from '../../store'
	import {
		websock
	} from '../../net/websock'

	export default {
		data() {
			return {
				store,
				kaoqinSetting: {}
			}
		},
		onReady() {
			console.log('kaoqin setting onready')
			this.fetchData()
		},
		methods: {
			async fetchData() {
				try {
					let res = await websock.getKaoqinSetting({})
					console.log('kaoqin setting11111111', res)
					this.kaoqinSetting = res
				} catch (err) {
					console.error(err)
					uni.showToast({title: err.message || 'error'})
				}
			},
			async updateData() {
				try {
					await websock.updateKaoqinSetting(this.kaoqinSetting)
				} catch (err) {
					console.error(err)
					uni.showToast({title: err.message || 'error'})
				}
			},
			waiqinAuditStr() {
				if (this.kaoqinSetting.waiqinAudit == 0) return '不需要'
				return '需要'
			},
			chuchaiDakaStr() {
				if (this.kaoqinSetting.chuchaiDaka == 0) return '不需要'
				return '需要'
			},
			shangbanTimeChange(e) {
				console.log(e.detail.value)
				this.kaoqinSetting.shangbanTime = e.detail.value
				this.updateData()
			},
			xiabanTimeChange(e) {
				console.log(e.detail.value)
				this.kaoqinSetting.xiabanTime = e.detail.value
				this.updateData()
			},
			waiqinAuditChange(e) {
				console.log(e.detail.value)
				this.kaoqinSetting.waiqinAudit = e.detail.value
				this.updateData()
			},
			chuchaiDakaChange(e) {
				console.log(e.detail.value)
				this.kaoqinSetting.chuchaiDaka = e.detail.value
				this.updateData()
			},
			// 加班时间分钟设置
			clickSetJiabanMinMinutes() {
				this.$refs.jiabanMinDialog.open()
			},
			confirmJiabanMinMinutes(val) {
				let valInt = parseInt(val)
				if (isNaN(valInt) || valInt < 0) {
					return uni.showToast({
						title: '请输入正确的数字'
					})
				}
				this.kaoqinSetting.jiabanMinMinutes = valInt
				this.updateData()
			},
			// 补签次数设置
			clickSetBukaTimes() {
				this.$refs.bukaTimesDialog.open()
			},
			confirmBukaTimes(val) {
				let valInt = parseInt(val)
				if (isNaN(valInt) || valInt < 0) {
					return uni.showToast({
						title: '请输入正确的数字'
					})
				}
				this.kaoqinSetting.bukaMaxTimes = valInt
				this.updateData()
			},
			// 补签天数设置
			clickSetBukaDays() {
				this.$refs.bukaDaysDialog.open()
			},
			confirmBukaDays(val) {
				let valInt = parseInt(val)
				if (isNaN(valInt) || valInt < 0) {
					return uni.showToast({
						title: '请输入正确的数字'
					})
				}
				this.kaoqinSetting.bukaDays = valInt
				this.updateData()
			},
			// 一般迟到分数设置
			clickSetChidao1Minutes() {
				this.$refs.chidao1Dialog.open()
			},
			confirmChidao1Minutes(val) {
				let valInt = parseInt(val)
				if (isNaN(valInt) || valInt < 0) {
					return uni.showToast({
						title: '请输入正确的数字'
					})
				}
				this.kaoqinSetting.chidao1Minutes = valInt
				this.updateData()
			},
			// 严重迟到分数设置
			clickSetchidao2Minutes() {
				this.$refs.chidao2Dialog.open()
			},
			confirmChidao2Minutes(val) {
				let valInt = parseInt(val)
				if (isNaN(valInt) || valInt < 0) {
					return uni.showToast({
						title: '请输入正确的数字'
					})
				}
				this.kaoqinSetting.chidao2Minutes = valInt
				this.updateData()
			},
			// 旷工迟到分数设置
			clickSetChidao3Minutes() {
				this.$refs.chidao3Dialog.open()
			},
			confirmChidao3Minutes(val) {
				let valInt = parseInt(val)
				if (isNaN(valInt) || valInt < 0) {
					return uni.showToast({
						title: '请输入正确的数字'
					})
				}
				this.kaoqinSetting.chidao3Minutes = valInt
				this.updateData()
			},
			// 一般早退分数设置
			clickSetZaotui1Minutes() {
				this.$refs.zaotui1Dialog.open()
			},
			confirmZaotui1Minutes(val) {
				let valInt = parseInt(val)
				if (isNaN(valInt) || valInt < 0) {
					return uni.showToast({
						title: '请输入正确的数字'
					})
				}
				this.kaoqinSetting.zaotui1Minutes = valInt
				this.updateData()
			},
			// 严重早退分数设置
			clickSetZaotui2Minutes() {
				this.$refs.zaotui2Dialog.open()
			},
			confirmZaotui2Minutes(val) {
				let valInt = parseInt(val)
				if (isNaN(valInt) || valInt < 0) {
					return uni.showToast({
						title: '请输入正确的数字'
					})
				}
				this.kaoqinSetting.zaotui2Minutes = valInt
				this.updateData()
			},
			// 旷工早退分数设置
			clickSetZaotui3Minutes() {
				this.$refs.zaotui3Dialog.open()
			},
			// 打卡范围设置
			clickDakaFanwei() {
				this.$refs.fanweiDialog.open()
			},
			confirmZaotui3Minutes(val) {
				let valInt = parseInt(val)
				if (isNaN(valInt) || valInt < 0) {
					return uni.showToast({
						title: '请输入正确的数字'
					})
				}
				this.kaoqinSetting.zaotui3Minutes = valInt
				this.updateData()
			},
			confirmDakaFanwei(val) {
				let valInt = parseInt(val)
				if (isNaN(valInt) || valInt < 0) {
					return uni.showToast({
						title: '请输入正确的数字'
					})
				}
				this.kaoqinSetting.dakaFanwei = valInt
				this.updateData()
			},
			// 选择打卡位置
			clickChooseDakaPos() {
				uni.chooseLocation({
					type: 'gcj02',
					geocode: true,
					success: res => {
						console.log(res)
						this.kaoqinSetting.dakaAddress = res.name || ''
						this.kaoqinSetting.dakaLongitude = res.longitude || 0
						this.kaoqinSetting.dakaLatitude = res.latitude || 0
						this.updateData()
					}
				})
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		line-height: 24px;
		background: linear-gradient(to bottom, #E8F5FD 50%, #F5F5F5 100%);
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.title-bg {
		height: 50px;
		background: linear-gradient(90deg, #ECF4FF 0%, rgba(180, 210, 255, 0) 100%);
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
	}

	.title-text {
		padding-top: 15px;
		padding-left: 15px;
		font-size: 17px;
		font-weight: bold;
		color: #333333;
		line-height: 20px;
	}
	
	.body-bg{
		background-color: #f8f8f8;
		border: 1px solid #e6e6e6;
		border-radius: 5px;
		height: 38px;
		font-size: 15px;
		color: #333333;
		
	}
	.body-picker{
		padding: 12px 14px 0px 14px;
		height: 76rpx;
	}
	.body-btn {
		padding: 1px ;
		height: 96rpx;
		
	}
	.btn-bg{
		padding-top: 5px ;
		font-size: 15px;
		border-radius: 1px;
	}
	.btn-bg::after{
		border: none;
	}

	.text-right {
		text-align: right;
	}

	.text-left {
		text-align: left;
	}
</style>
